<template>
  <div class="g-pagination" :style="customStyle">
    <slot name="left"></slot>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <slot name="right"></slot>
  </div>
</template>

<script>
/**
 * 自定义分页
 * @param {String}	  	justify         分页位置，（默认：right，参考值：right/left/between）
 * @param {String}  		height		      高度（默认 40px）
 * @param {String}  		padding		      内边距（默认 0 20px）
 * @param {Number}  		total		        总数（默认 0）
 * @param {Number}  		currentPage		  当前页码（默认 1）
 * @param {Number}  		pageSize	      每页显示条数（默认10）
 * @param {Array}  		  pageSizes	      每页显示页码下拉选择（默认 [10, 20, 50, 100, 200]）
 * @param {String}  		layout	        每页显示页码下拉选择（默认 total, sizes, prev, pager, next, jumper）
 *
 *
 * @event {Function()} 	currentChange   currentPage 改变时会触发
 * @event {Function()} 	sizeChange 			pageSize 改变时会触发
 *
 * 插槽：left、right
 *
 * @example <g-pagination :total="total" :currentPage="page" :pageSize="size" @sizeChange="sizeChange" @currentChange="currentChange"></g-pagination>
 * */

import props from "./props.js";
export default {
  name: "GPagination",
  mixins: [props],
  computed: {
    customStyle() {
      let justifyObj = {
        left: "flex-start",
        right: "flex-end",
        between: "space-between",
      };

      return {
        height: this.height,
        padding: this.padding,
        "--justifyContent": Object.keys(justifyObj).includes(this.justify)
          ? justifyObj[this.justify]
          : "flex-end",
      };
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("sizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("currentChange", val);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";

.g-pagination {
  width: 100%;
  @include flex(row);
  justify-content: var(--justifyContent);
  align-items: center;
}
</style>

<style lang="scss">
.el-pagination {
  display: flex;
  align-items: center;
  button,
  span:not([class*="suffix"]) {
    height: unset;
  }
}
</style>